<template>
  <!-- 会员管理页面 -->
  <div>
    <div class="box">
      <div class="boxin">
        <!-- 头部搜索 -->
        <div class="header">
          <el-input v-model="input1" placeholder="请输入用户名"></el-input
          ><el-input v-model="input2" placeholder="请输入用户id"></el-input
          ><el-input v-model="input3" placeholder="请输入手机号"></el-input>
          <el-button type="primary" @click="selet">查找</el-button>
          <el-button type="primary" @click="derive">导出</el-button>
        </div>
        <!-- 身体内容 -->
        <div class="bottom">
          <!-- 内容 -->
          <div class="content">
            <template>
              <el-table :data="tableData" style="width: 100%" border>
                <el-table-column label="用户id" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="用户昵称" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.nickname
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="用户头像" width="80" align="center">
                  <template slot-scope="scope">
                    <img :src="scope.row.avatar" alt="" class="img1" />
                  </template>
                </el-table-column>
                <el-table-column label="手机号码" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.mobile
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="性别" align="center">
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium" v-if="scope.row.gender == 1"
                        >男</el-tag
                      >
                      <el-tag size="medium" v-else-if="scope.row.gender == 2"
                        >女</el-tag
                      >
                      <el-tag size="medium" v-else>同</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="生日" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="用户等级" align="center">
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium" v-if="scope.row.userLevel == 0"
                        >普通用户</el-tag
                      >
                      <el-tag size="medium" v-if="scope.row.userLevel == 1"
                        >VIP用户</el-tag
                      >
                      <el-tag size="medium" v-if="scope.row.userLevel == 2"
                        >高级VIP用户</el-tag
                      >
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                  <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium" v-if="scope.row.status == 2"
                          >已注销</el-tag
                        >
                        <el-tag size="medium" v-if="scope.row.status == 1"
                          >禁用</el-tag
                        >
                        <el-tag size="medium" v-if="scope.row.status == 0"
                          >可用</el-tag
                        >
                      </div>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      class="xiangqing"
                      >编辑</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <!-- 分页 -->
          <div>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
              >
              </el-pagination>
            </div>
          </div>
          <!-- 详情对话框 -->
          <el-dialog
            title="用户编辑"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose"
          >
            <div class="tan">
              <div>
                用户名<el-input
                  placeholder="请输入内容"
                  v-model="tableData1.username"
                  :disabled="true"
                >
                </el-input>
              </div>
              <div>
                用户昵称<el-input
                  v-model="tableData1.nickname"
                  placeholder="请输入用户昵称"
                ></el-input>
              </div>
              <div>
                用户手机<el-input
                  v-model="tableData1.mobile"
                  placeholder="请输入用户昵称"
                ></el-input>
              </div>
              <div>
                用户性别
                <template>
                  <el-select v-model="tableData1.gender" placeholder="请选择">
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
              <div>
                用户等级
                <template>
                  <el-select
                    v-model="tableData1.userLevel"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
              <div>
                状态
                <template>
                  <el-select v-model="tableData1.status" placeholder="请选择">
                    <el-option
                      v-for="item in options3"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="sure">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
import { list } from "@/api/yonghuguanli/huiyuanguanli";
import { sele } from "@/api/yonghuguanli/huiyuanguanli";
import { ok } from "@/api/yonghuguanli/huiyuanguanli";
export default {
  data() {
    return {
      input1: "", //用户名
      input2: "", //用户id
      input3: "", //手机号
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      total: 0,
      currentPage4: 1, //当前页
      pageNum: 10, //每页显示多少条
      dialogVisible: false,
      inp1: "",
      tableData1: "",
      options1: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
      options2: [
        {
          value: 1,
          label: "vip用户",
        },
        {
          value: 2,
          label: "高级VIP用户",
        },
        {
          value: 0,
          label: "普通用户",
        },
      ],
      options3: [
        {
          value: 1,
          label: "禁用",
        },
        {
          value: 2,
          label: "销毁",
        },
        {
          value: 0,
          label: "可用",
        },
      ],
    };
  },
  methods: {
    sure() {
      console.log(this.tableData1);
      ok(
        this.tableData1.addTime,
        this.tableData1.avatar,
        this.tableData1.deleted,
        this.tableData1.gender,
        this.tableData1.id,
        this.tableData1.lastLoginIp,
        this.tableData1.lastLoginTime,
        this.tableData1.mobile,
        this.tableData1.nickname,
        this.tableData1.password,
        this.tableData1.sessionKey,
        this.tableData1.status,
        this.tableData1.updateTime,
        this.tableData1.userLevel,
        this.tableData1.username,
        this.tableData1.weixinOpenid
      ).then((res) => {
        if (res.errmsg == "成功") {
          this.$notify({
            title: "成功",
            message: "更新用户成功",
            type: "success",
          });
          list(this.currentPage4, this.pageNum).then((res) => {
            if (res.errmsg == "成功") {
              this.tableData = res.data.list;
              this.total = res.data.total;
              console.log(res);
            }
          });
          this.dialogVisible = false;
        }
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.tableData1 = row;
      this.dialogVisible = true;
    },
    //分页点击
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      list(this.currentPage4, this.pageNum).then((res) => {
        if (res.errmsg == "成功") {
          this.tableData = res.data.list;
          this.total = res.data.total;
          console.log(res);
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      list(this.currentPage4, this.pageNum).then((res) => {
        if (res.errmsg == "成功") {
          this.tableData = res.data.list;
          this.total = res.data.total;
          console.log(res);
        }
      });
    },
    //查找
    selet() {
      sele(
        this.currentPage4,
        this.pageNum,
        this.input1,
        this.input3,
        this.input2
      ).then((res) => {
        if (res.errmsg == "成功") {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.input1 = "";
          this.input3 = "";
          this.input2 = "";
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //导出
    //导出
    derive() {
      const tableData = this.tableData; // 如果表格数据为空，提示

      if (tableData.length === 0) {
        this.$message({
          type: "warning",
          message: "没有数据可以导出！",
        });
        return;
      } // 定义表头

      const headers = [
        "用户名",
        "手机号",
        "性别",
        "生日",
        "状态",
      ]; // 将表格数据转换为工作表数据

      const worksheetData = [
        headers, // 第一行为表头
        ...tableData.map((item) => [
          item.nickname || "暂无", // 如果为空，填充为“暂无”
          item.mobile || "暂无",
          item.gender || "暂无",
          item.date || "暂无",
          item.status || "暂无",
        ]),
      ]; // 创建工作表

      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作簿

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 导出 Excel 文件

      XLSX.writeFile(workbook, "数据列表.xlsx"); // 提示导出成功

      this.$message({
        type: "success",
        message: "导出成功！",
      });
    },
  },
  created() {
    list(this.currentPage4, this.pageNum).then((res) => {
      if (res.errmsg == "成功") {
        this.tableData = res.data.list;
        this.total = res.data.total;
        console.log(res);
      }
    });
  },
};
</script>

<style scoped>
.header {
  display: flex;
}
.el-input {
  width: 300px;
}
.img1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #c0c4cc;
}
.xiangqing {
  background-color: #1890ff;
  color: #fff;
}
.tan {
  text-align: center;
}
.tan > div {
  width: 350px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tan > div > .el-input {
  width: 240px;
}
.block {
  margin: 50px;
}
</style>